import React, { } from 'react'
import { View, Image } from '@tarojs/components'
import { backgroundObj } from '@/utils/utils'
import Container from '../Container'

import './index.scss'
const Navigation = (props) => {
    const { data = {}, linkGo } = props
    const { count = 4, list = [], iconSize, borderRadius, borderFlag, backgroundColor, backgroundImage, textStyle, fontColor, top, bottom, fontSize, paddingTop, paddingLeft, backgroundType } = data
    const scale = 100 / count
    const renderBg = () => {
        if (backgroundType !== 'image') {
            return {
                background: backgroundColor
            }
        } else {
            return {
                ...backgroundObj(backgroundImage)
            }
        }
    }
    const { } = data
    return <Container {...props}>
        <View justify={'space-between'} style={{ borderRadius, border: borderFlag ? '1px solid #eeeeee' : 'none', padding: `${paddingTop}px ${paddingLeft}px`, marginTop: top, marginBottom: bottom, ...renderBg() }} className='wxPage_navigation'>
            {list.map((val, index) => {
                const { title, src } = val
                return <View style={{ flex: `1 1 ${scale}%` }} onClick={() => linkGo(val)} className='wxPage_row'>
                    <View className={iconSize === 'small' ? 'wxPage_navigation_imgBox' : 'wxPage_navigation_imgBigBox'}>
                        <Image className='wxPage_navigation_img' src={src} />
                    </View>
                    <View style={{ fontWeight: textStyle === 'default' ? '100' : 'bold', color: fontColor, fontSize: fontSize }} className='wxPage_font'>
                        {title}
                    </View>
                </View>
            })}
        </View>
    </Container>

}
export default Navigation